<!-- 1 template  -->
<template>
  <div style="border:solid 1px red;min-height: 50px;">
    <div ref="container"></div>
    <button @click="counter++"> 点我+1 ：counter：{{ counter }}</button>
  </div>

  <div class="child">
    <Banner ref="banner"></Banner>
  </div>

  <button @click="shwoComponentRef()">点击shwoComponentRef</button>



</template>

<!-- 2 script -->
<script setup lang="ts" name='App'>
import { ref, useTemplateRef, VueElement } from "vue";
import Banner from "./components/Banner.vue";

// <div ref="container"></div>  container 代表dom节点
let container = ref<HTMLElement>();


//如果在 <Banner ref="banner"></Banner> 代表组件对象

let banner = ref<VueElement>(); //约定  如果关联的是dom节点， 变量名  需要和 dom节点上的 ref 属性值一样
// let banner1111 = useTemplateRef('banner')

let counter = ref(0)

function shwoComponentRef() {
  console.log("banner", banner);
  console.log("banner.value.counter", (banner.value as any).counter);


}
</script>

<!-- 3 style -->
<style scoped>
.child {

  border: solid 1px grey;
}
</style>